<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="css/index-clear.css">
    <link rel="stylesheet" href="css/index-top.css">
    <link rel="stylesheet" href="css/index-banner.css">
    <link rel="stylesheet" href="css/index-nav.css">
    <link rel="stylesheet" href="css/index-display.css">
    <link rel="stylesheet" href="css/index-footer.css">
    <link rel="stylesheet" href="css/index-carousel.css">
    <link rel="stylesheet" href="css/policy-footer.css">
</head>

<body>
    <div class="top">
        <div class="top-center">
            <div class="top-center-left">
                <img src="./images/index/logo.png" alt="#">
                <a href="#" class="second-title">企业采购</a><span class="icon chevron-down"></span><span>|</span>
                <div class="submenu">
                    <a href="#" class="submenu-item">智慧集成</a>
                    <a href="#" class="submenu-item">解决方案</a>
                    <a href="#" class="submenu-item">优惠力度</a>
                </div>
                <a href="#" class="second-title2">客户服务</a><span class="icon chevron-down"></span><span>|</span>
                <div class="submenu2">
                    <a href="#" class="submenu-item">硬件问题</a>
                    <a href="#" class="submenu-item">流程问题</a>
                    <a href="#" class="submenu-item">专属客服</a>
                </div>
                <a href="#" class="second-title3">云服务</a><span class="icon chevron-down"></span><span>|</span>
                <div class="submenu3">
                    <a href="#" class="submenu-item">服务器</a>
                    <a href="#" class="submenu-item">云平台</a>
                    <a href="#" class="submenu-item">控制台</a>
                </div>
                <a href="#" class="second-title4">规则协议</a><span class="icon chevron-down"></span><span>|</span>
                <div class="submenu4">
                    <a href="#" class="submenu-item">购买协议</a>
                    <a href="#" class="submenu-item">退款协议</a>
                    <a href="#" class="submenu-item">换货协议</a>
                </div>
                <a href="#">技术支持</a>
            </div>
            <div class="top-center-right">
                <a href="html/登录.html">登录</a><span>|</span>
                <a href="html/注册.html">注册</a><span>|</span>
                <a href="#">消息通知</a>
                <a href="html/购物车.html" class="shopping-cart">购物车</a>
            </div>
        </div>
    </div>
    <div class="banner">
        <a href="#">
            <div class="computer"></div>
            <h6>个人电脑</h6>
        </a>
        <a href="#">
            <div class="book"></div>
            <h6>书籍</h6>
        </a>
        <a href="#">
            <div class="phone"></div>
            <h6>智能手机</h6>
        </a>
        <a href="#">
            <div class="accessories"></div>
            <h6>配件/选件</h6>
        </a>
        <a href="#">
            <div class="ebook"></div>
            <h6>电子书</h6>
        </a>
        <div class="search">
            <input text="请输入要查找的商品" class="search-input" placeholder="请输入要查询的商品">
            <div class="search-icon"></div>
        </div>
    </div>
    <div class="carousel-container">
        <div class="carousel-wrapper">
            <div class="carousel-images" id="carouselImages">
                <img src="images/index/lunbo1.jpg" alt="图片1">
                <img src="images/index/lunbo2.jpg" alt="图片2">
                <img src="images/index/lunbo3.jpg" alt="图片3">
            </div>
            <button class="carousel-arrow carousel-arrow-left" onclick="prevSlide()">❮</button>
            <button class="carousel-arrow carousel-arrow-right" onclick="nextSlide()">❯</button>
        </div>
    </div>
    <script src="js/index-carousel.js"></script>

    <div class="nav">
        <div class="nav-left">
            <a href="#">手机</a>
            <a href="#">电视</a>
            <a href="#">家电</a>
            <a href="#">笔记本 平板 显示器</a>
            <a href="#">出行 穿戴</a>
            <a href="#">耳机 音箱</a>
            <a href="#">健康 儿童</a>
            <a href="#">生活 箱包</a>
            <a href="#">智能 路由器</a>
            <a href="#">电源 配件</a>
        </div>
        <a href="html/商品详情页.html" class="nav-right">【这是跳转详情页图片】请点这里....</a>
        <!-- <div class="nav-right"></div> -->
    </div>
    <div class="title1">
        <h2>生活电器</h2>
    </div>
    <div class="title1-detail">
        <a href="#" class="title1-detail-1"></a>
        <a href="#" class="title1-detail-2"></a>
        <a href="#" class="title1-detail-3"></a>
        <a href="#" class="title1-detail-4"></a>
        <a href="#" class="title1-detail-5"></a>
    </div>
    <div class="title1">
        <h2>图书</h2>
    </div>
    <div class="title1-detail">
        <a href="#" class="title1-detail2-1"></a>
        <a href="#" class="title1-detail2-2"></a>
        <a href="#" class="title1-detail2-3"></a>
        <a href="#" class="title1-detail2-4"></a>
        <a href="#" class="title1-detail2-5"></a>
    </div>




    <footer>
        <div class="footer-container">
            <!-- 公司信息 -->
            <div class="footer-section">
                <h3>关于我们</h3>
                <p>我们致力于提供高质量的产品和服务，满足客户的需求。</p>
                <div class="social-links">
                    <a href="#" title="微博"><span class="icon icon-weibo"></span></a>
                    <a href="#" title="微信"><span class="icon icon-wechat"></span></a>
                    <a href="#" title="Twitter"><span class="icon icon-twitter"></span></a>
                    <a href="#" title="LinkedIn"><span class="icon icon-linkedin"></span></a>
                </div>
            </div>

            <!-- 快速链接 -->
            <div class="footer-section">
                <h3>快速链接</h3>
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">产品</a></li>
                    <li><a href="#">服务</a></li>
                    <li><a href="#">关于我们</a></li>
                    <li><a href="#">联系我们</a></li>
                </ul>
            </div>

            <!-- 联系方式 -->
            <div class="footer-section">
                <h3>联系方式</h3>
                <ul>
                    <li><span class="icon icon-map-marker"></span>美国白宫大厦A座1001室</li>
                    <li><span class="icon icon-phone"></span>400-123-4567</li>
                    <li><span class="icon icon-envelope"></span>特朗普@关税double.com</li>
                </ul>
            </div>

            <!-- 法律信息 -->
            <div class="footer-section">
                <h3>法律信息</h3>
                <ul>
                    <li><a href="#">隐私政策</a></li>
                    <li><a href="#">服务条款</a></li>
                    <li><a href="#">Cookie政策</a></li>
                    <li><a href="#">法律声明</a></li>
                </ul>
            </div>
        </div>

        <div class="copyright">
            <p>&copy; 2025 美国退堂鼓信息技术有限公司. 保留所有权利.</p>
        </div>
    </footer>
</body>

</html>